
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul @click="reverse"> 
      <!-- <li v-for="n in list" :key="list.id">{{n.num}}</li> -->
      <!-- <li v-for="n in arr" :key="index"><test></test></li> -->
      <li v-for="n in arr" :key="Math.random"><test></test></li>
      
    </ul>
  </div>

  
  <!-- 引入vue的cdn -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建vue实例
    var app = new Vue({
      el: '#app',
      data: {
        list:[
          {num:1,id:1},
          {num:2,id:2},
          {num:3,id:3},
        ],
        arr:[1,2,3]
      },
      methods:{
        reverse(){
          // this.list.reverse()
          // this.arr.shift()
          this.arr.splice(0,1)
        }
      },
      components:{
        test:{
          template:'<div>{{Math.random()}}</div>'
        }
      }
    })


  </script>
</body>
</html>